<template>
  <div class="login_wrapper">
    <!-- <div class="box1"></div> -->
    <el-card class="box-card">
      <el-form
        :label-position="labelPosition"
        label-width="80px"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-button
          type="primary"
          @click="Login('ruleForm')"
          class="login_button"
          >登录</el-button
        >
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { login } from "../../api/init";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      labelPosition: "right",
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入登录名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    Login(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            const msg = await login(this.ruleForm);
            const {
              data: { token, id, message },
            } = msg;
            if (token) {
              Cookies.set("token", token);
              Cookies.set("id", id);
              this.$message.success("登录成功");
              if (this.$route.query.redirect) {
                this.$router.push(this.$route.query.redirect);
              } else {
                this.$router.push("/");
              }
            } else {
              this.$message.error(message);
            }
          } catch (error) {
            this.$message.error("网络错误");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style>
/* .login_wrapper {
  height: 100vh;
  position: relative;
}
.box-card {
  width: 480px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
} */

.login_wrapper {
  height: 100vh;
}
.box-card {
  margin: 0 auto;
  width: 480px;
  height: 200px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.login_button {
  width: 120px;
  float: right;
}
/* .login_wrapper {
  height: 100vh;
  line-height: 100vh;
}
.box-card {
  width: 480px;
  height: 200px;
  display: inline-block;
} */

/* .login_wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-card {
  width: 480px;
  height: 200px;
} */
</style>